<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #000;
			filter: blur(5px) contrast(10);
		}
		.ball {
			position: absolute;
			left: 0; 
			top: 40vh;
			height: 20vh;
			width: 20vh;
			border-radius: 50%;
			background: #fff;
			animation: move 10s infinite;
			box-shadow: 10rpx;
		}
		.g-wall {
			position: absolute;
			left: 20%; 
			top: 30vh;
			height: 40vh;
			width: 15vh;
			border-radius: 50%;
			background: rgba(0, 0, 0, .5);
		}
		.g-wall:nth-child(2) {
			left: 40%; 
		}
		.g-wall:nth-child(3) {
			left: 60%; 
		}
		.g-wall:nth-child(4) {
			left: 80%; 
		}
		@keyframes move {
			20% {
				transform: translate(20vw, 0);
				background: #ddd;
			}
			40% {
				transform: translate(40vw, 0);
			}
			60% {
				transform: translate(60vw, 0);
				background: #ddd;
			}
			80% {
				transform: translate(80vw, 0);
				background: #ddd;
			}
			100% {
				transform: translate(100vw, 0);
				background: #ddd;
			}
		}
	</style>
</head>
<body>
	<div class="ball"></div>

<div class="g-wall"></div>
<div class="g-wall"></div>
<div class="g-wall"></div>
<div class="g-wall"></div>
</body>
</html>